<template>
<div class="goods-wrapper">
    <div class="menu-wrapper" ref="menuWrapper">
        <ul>
            <li class="menu-item border-1px" ref="menuList" @click="moveFoodList(index, $event)" v-for="(item, index) in goods" :key="index" :class="{'current': currentIndex===index}">
                <div class="text">
                    <span class="icon" v-show="item.type !== -1" :class="classMap[item.type]"></span><span class="menu-name">{{item.name}}</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="food-wrapper" ref="foodWrapper">
        <ul>
            <li class="food-list" v-for="(item, index) in goods" ref="foodList" :key="index">
                <h1 class="title">{{item.name}}</h1>
                <ul>
                    <li class="food-item border-1px" @click="foodDetail(food, $event)" v-for="(food, i) in item.foods" :key="i">
                        <div class="icon">
                            <img :src="food.icon" width="57" height="57">
                        </div>
                        <div class="content">
                            <h2 class="name">{{food.name}}</h2>
                            <p class="description">{{food.description}}</p>
                            <div class="extra">
                                <span class="count">月售{{food.sellCount}}份</span><span class="rating">好评率{{food.rating}}%</span>
                            </div>
                            <div class="price">
                                <span class="new">￥{{food.price}}</span><span v-if="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
                            </div>
                            <div class="carcontrol-wrapper">
                                <carcontrol @add="addFood" :food="food"></carcontrol>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <food :food="selectedFood" v-if="hasSelectedFood" @back="forward" @add="appendFood"></food>
    <shopcar ref="shopcar" :selectFoods="selectFoods" :seller="seller"></shopcar>
</div>
</template>

<script>
import BScroll from 'better-scroll'
import shopcar from 'components/shopcar/shopcar.vue'
import carcontrol from 'components/carcontrol/carcontrol.vue'
import food from 'components/food/food.vue'

export default {
    inject: ['reload'],
    props: {
        seller: {
            type: Object
        }
    },
    created() {
        this.$http.get('/api/goods').then((response) => {
            let body = response.body
            if (!body.errno) {
                this.goods = body.data
                this.$nextTick(() => {
                    this._initScroll()
                    this._calFoodListPos()
                })
            }
        })
        this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
    },
    data() {
        return {
            goods: [],
            foodListPos: [],
            scrollY: 0,
            selectedFood: null,
            hasSelectedFood: false
        }
    },
    mounted() {
        var _this = this
        window.onresize = function() {
            _this.reload()
        }
    },
    computed: {
        currentIndex() {
            for (let i = 0, len = this.foodListPos.length; i < len; i++) {
                let height1 = this.foodListPos[i]
                let height2 = this.foodListPos[i + 1]
                if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
                    if (this.scrollY < 0) i = 0
                    this.moveMenuList(i)
                    return i
                }
            }
            return 0
        },
        selectFoods() {
            let foods = []
            this.goods.length && this.goods.forEach(good => {
                good.foods.forEach(food => {
                    if (food.count) {
                        foods.push(food)
                    }
                })
            })
            return foods
        }
    },
    methods: {
        _initScroll() {
            if (!this.menuScroll) {
                this.menuScroll = new BScroll(this.$refs.menuWrapper, {
                    click: true
                })
            } else {
                this.menuScroll.refresh()
            }
            if (!this.foodScroll) {
                this.foodScroll = new BScroll(this.$refs.foodWrapper, {
                    click: true,
                    probeType: 3
                })
            } else {
                this.foodScroll.refresh()
            }
            this.foodScroll.on('scroll', (pos) => {
                this.scrollY = -pos.y
            })
        },
        _calFoodListPos() {
            let foodListEles = this.$refs.foodList
            for (let i = 0, len = foodListEles.length; i < len; i++) {
                this.foodListPos.push(foodListEles[i].offsetTop)
            }
        },
        moveMenuList(index) {
            let menuList = this.$refs.menuList
            let el = menuList[index]
            this.menuScroll.scrollToElement(el, 300, 0, -100)
        },
        moveFoodList(index, event) {
            if (!event._constructed) {
                return true
            }
            let foodList = this.$refs.foodList
            let el = foodList[index]
            this.foodScroll.scrollToElement(el, 300)
        },
        addFood(target) {
            this._drop(target)
        },
        _drop(target) {
            this.$refs.shopcar.drop(target)
        },
        foodDetail(food, event) {
            if (!event._constructed) {
                return true
            }
            this.selectedFood = food
            this.hasSelectedFood = true
        },
        forward(isback) {
            this.hasSelectedFood = isback
        },
        appendFood(target) {
            this.$refs.shopcar.drop(target)
        }
    },
    components: {
        shopcar,
        carcontrol,
        food
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl"
.goods-wrapper
    position: absolute
    display: flex
    top: 176px
    bottom: 46px
    width: 100%
    overflow: hidden
    .menu-wrapper
        flex: 0 0 80px
        width: 80px
        height: 100%
        background: #f3f5f7
        .menu-item
            display: flex
            align-items: center
            height: 54px
            width: 100%
            font-weight: 200
            color: rgb(77, 85, 93)
            border-bottom: 1px solid rgba(7, 17, 27, 0.1)
            &:last-child
                border: none
            &.current
                background: white
                color: rgb(240, 20, 20)
                font-weight: 700
                margin-top: -1px
                border: none
            .text
                padding: 0 12px
                .menu-name
                    vertical-align: top
                    font-size: 12px
                    line-height: 14px
                .icon
                    display: inline-block
                    margin-right: 2px
                    &.decrease
                        base_image('decrease_3', 12px, 12px)
                    &.discount
                        base_image('discount_3', 12px, 12px)
                    &.guarantee
                        base_image('guarantee_3', 12px, 12px)
                    &.invoice
                        base_image('invoice_3', 12px, 12px)
                    &.special
                        base_image('special_3', 12px, 12px)
    .food-wrapper
        width: 100%
        .title
            background: #f3f5f7
            height: 26px
            font-size: 12px
            color: rgb(147, 153, 159)
            line-height: 26px
            padding-left: 14px
            border-left: 4px solid #d9dde1
        .food-item
            display: flex
            margin: 18px
            padding-bottom: 18px
            border-bottom: 1px solid rgba(7, 17, 27, 0.1)
            &:last-child
                border: none
                margin-bottom: 0
            .icon
                flex: 0 0 57px
                width: 57px
                img
                    border-radius: 3px
            .content
                font-size: 10px
                color: rgb(147, 153, 159)
                margin-left: 10px
                position: relative
                width: 100%
                .name
                    font-size: 14px
                    font-weight: bold
                    color: rgb(7, 17, 27)
                    line-height: 14px
                    margin: 2px 0 8px 0
                .description
                    line-height: 12px
                    margin-bottom: 8px
                .count
                    margin-right: 12px
                .price
                    margin-top: 4px
                    line-height: 24px
                    font-size: 14px
                    font-weight: 700
                    color: rgb(147, 153, 159)
                    .new
                        color: rgb(240,20,20)
                        margin-right: 8px
                    .old
                        text-decoration: line-through
                .carcontrol-wrapper
                    position: relative              
</style>
